<template>
  <div class="messageDiv">
    <!-- 头部按钮 -->
    <div class="headerDiv">
      <div class="headerDiv_left">
          <i :class="rotate ? 'el-icon-refresh rotateGo' : 'el-icon-refresh rotateBack'" @click="refreshBtn"></i>
          <el-button type="primary" @click="publishNews">发布信息</el-button>
          <el-button type="primary"  @click="deletMessage(multipleSelection)">批量删除</el-button>
      </div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline headerDiv_right">
          <el-form-item>
            <el-input v-model="formInline.user" placeholder="请输入要搜索的标题" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryMessage">查询</el-button>
          </el-form-item>
      </el-form>   
    </div>

    <!-- 中间表单 -->
    <div class="contentDiv">
      <el-table
        ref="multipleTable"
        :data="dataShow"
        tooltip-effect="dark"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :row-key="getRowKeys"
        >
        <el-table-column
          :reserve-selection="true"
          type="selection"
          align="center"
          width="55">
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="newsTitle"
          label="标题"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="newsAuthor"
          label="作者"
          align="center"
          width="200">
        </el-table-column>
        <el-table-column
          prop="newsTime"
          label="发布时间"
          align="center"
          width="200">
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="newsContent"
          label="发布内容"
          align="center"
          >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="120">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="editMessage(scope.row)"  circle></el-button>
            <el-button type="danger" icon="el-icon-delete" @click="deletMessage(scope.row.newsId)"  circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页按钮 -->
    <div class="pagingTool">
       <el-pagination background @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="current" 
                  :page-size="pageSize"
                  layout="prev, pager, next, jumper, slot, total" 
                  :total="total" class="pageInfo">
          <span id="sure">确定</span>
       </el-pagination>
    </div>

    <!-- 模态框 -->
    <el-dialog class="faBuDialog" :title="dialogTitle" :visible.sync="dialogFormVisible" width="70%">
      <el-form :model="form">
        <div class="dialogLeft">
            <el-form-item label="标题" :label-width="formLabelWidth">
                <el-input class="newsDialog_input" v-model="form.newsTitle" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="作者" :label-width="formLabelWidth">
              <el-input class="newsDialog_input" v-model="form.newsAuthor"></el-input>
            </el-form-item>
            <el-form-item label="发布时间" :label-width="formLabelWidth">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择发布日期" v-model="form.newsTime"></el-date-picker>
              </el-col>
            </el-form-item>
        </div>
        
        <div class="dialogRight">
            <el-form-item >
              <div class="newsDialog_neiRong">内容</div>
              <el-input type="textarea" v-model="form.newsContent"></el-input>
            </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveMessage">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { axiosRequest } from "@/utils/axiosRequest";
export default {
  data() {
    return {
        rotate: false,
        formInline: {
          user: '',
        },
        tableData: [],
        queryDatas: [],
        multipleSelection: [],
        dialogFormVisible: false,
        formLabelWidth: '100px',
        dialogTitle: "发布新信息",
        form: {},
        // 分页
        current:1,      //默认显示第一页数据
        pageSize:5,     //每页显示多少条数据
        total:0,        //一共多少条后台数据
        dataShow: [],   //当前显示的数据
        pageNum: 1,     //共有几页
        totalPage: [],  //所有页面的数据
    }
  },
  methods: {
    // 刷新按钮事件
    refreshBtn() {
      var self = this;
      if(self.rotate == false){
        self.rotate = true;
      }else {
        self.rotate = false;
      }
      self.gettableList();
      self.$message({
          showClose: true,
          message: '刷新成功！！！',
          type: 'success'
        });
    },

    // 发布信息按钮事件
    publishNews() {
      var self = this;
      self.form = {};
      self.dialogFormVisible = true;
    },

    // 查询按钮事件
    queryMessage() {
      var self = this;
      var newTables = self.queryDatas;
      var newsQuerys = self.formInline.user.toLowerCase();
      let newArrays = [];
      newArrays = newTables.filter( function(e){
         if(e.newsTitle.toLowerCase().indexOf(newsQuerys) !== -1 || e.newsAuthor.toLowerCase().indexOf(newsQuerys) !== -1 ){
           return e;
         }
      });
      if(newArrays.length !== 0){
          self.$message({
              message: '查找成功，这是一条成功消息',
              type: 'success'
          });
      } else {
         self.$message({
              message: '我记得没有这一条信息的哦',
              type: 'warning'
          });
      }
      self.total = newArrays.length;
      self.pageNum = Math.ceil(self.total / self.pageSize) || 1;
          for(let i = 0; i < self.pageNum; i++){
            self.totalPage[i] = newArrays.slice(self.pageSize * i, self.pageSize * (i + 1))
          }
      self.dataShow = self.totalPage[self.current - 1];
    },

    // 编辑信息按钮事件
    editMessage(row) {
      var self = this;
      self.dialogTitle = "编辑信息";
      self.form = row;
      self.dialogFormVisible = true;
    },

    // 批量删除按钮事件 表单删除按钮事件
    deletMessage(id) {
      var self = this;
      let selectList = [];
      let newSelects = self.multipleSelection;
      if(id.constructor !== Array){
        selectList.push(id);
      } else {
        newSelects.forEach(e => { selectList.push(e.newsId) });
      }
      let delectDatas = {
        idList: selectList,
      }
      self.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           axiosRequest("delete","/news/del",delectDatas).then((res) => {
              if (res.data.code === 200) {
                  self.gettableList();
                  self.$message({
                    type: 'success',
                    message: '删除数据成功！！！'
                  });
                } else {
                  self.$message({
                    showClose: true,
                    message: '错了哦，请求信息失败了！！！',
                    type: 'error'
                  });
                }
            });
        }).catch(() => {
          self.$message({
            type: 'info',
            message: '已取消删除！！！'
          });          
        });
    },

    //表格多选切换页面回显
    getRowKeys(row) {
      return row.newsId;
    },

    // 单选或多选表单
    handleSelectionChange(val) {
        this.multipleSelection = val;
    },

    //每页显示
    handleSizeChange(val) {
      this.pageSize = val;
      this.current=1;
    },

    //显示页
    handleCurrentChange(val) {
      this.current = val;
      this.gettableList();
    },

    // 模态框-确定按钮事件
    saveMessage() {
        var self = this;
        let newForm = self.form;
        axiosRequest("post","/news/save",newForm).then((res) => {
          if (res.data.code === 200) {
              self.$message({
                message: '保存信息成功！！！',
                type: 'success'
              });
              self.dialogFormVisible = false;
              self.gettableList();
            } else {
              self.$message({
                showClose: true,
                message: '错了哦，请求信息失败了！！！',
                type: 'error'
              });
            }
        });
    },

    // 请求后台得到表单信息
    gettableList(){
      var self = this;
      axiosRequest("get","/news/listAll",null).then((res) => {
          if (res.data.code === 200) {
              self.total = res.data.data.length;
              self.tableData = res.data.data.reverse();
              self.queryDatas = JSON.parse(JSON.stringify(res.data.data));
              self.pageNum = Math.ceil(self.total / self.pageSize) || 1;
              for(let i = 0; i < self.pageNum; i++){
                self.totalPage[i] = self.tableData.slice(self.pageSize * i, self.pageSize * (i + 1))
              }
              self.dataShow = self.totalPage[self.current - 1];
          } else {
              self.$message({
                showClose: true,
                message: '错了哦，请求信息失败了！！！',
                type: 'error'
              });
            }
        });
    },
  },

  mounted: function(){
    var self = this;
    self.gettableList();
  },
}
</script>

<style lang="less" scoped>
.messageDiv {
  padding-left: 10px;
  position: relative;
}

.headerDiv {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.headerDiv_left {
  width: 35%;
  min-width: 320px;
}

.headerDiv_left > i {
  margin-left: 5%;
}

.rotateBack {
  transform: rotate(180deg);
  transition: all 2s;
}

.rotateGo {
  transform: rotate(-180deg);
  transition: all 2s;
}

.headerDiv_left > i:hover {
  color: #218ef3;
  cursor:  pointer;
}

.headerDiv_left /deep/ .el-button {
  margin-top: 4px;
  margin-left: 10%;
  padding: 8px 11px;
}

.headerDiv_right /deep/ .el-button {
  padding: 8px 15px;
}

.headerDiv_right /deep/ .el-input__inner {
    height: 35px;
}

.pagingTool{
  position: absolute;
  top: 458px;
}

#sure {
    border: 1px solid #DCDFE6;
    text-align: center;
    line-height: 25px;
    display: inline-block;
    margin: 0px 15px;
    cursor: pointer;
    width: 4%;
    border-radius: 3px;
}

.faBuDialog {
    min-width: 900px;
}

.faBuDialog /deep/ .el-dialog__body {
    padding: 10px 20px 0px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
}

.el-form {
    display: flex;
}

.dialogLeft {
  height: cal(100% - 100px);
  display:-webkit-flex;
  display: flew;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.dialogRight {
  width: 53%;
  margin-left: 62px;
}

.newsDialog_input {
  width: 280px;
}

.newsDialog_neiRong {
  padding-left: 0px;
}

.el-form /deep/ .el-textarea__inner {
    height: 290px;
}


</style>

<style>
.el-tooltip__popper{
  display: none;
}
</style>